<template>
	<!-- 添加或修改脱密回访记录对话框 -->
	<el-dialog :title="dialogTitle" :visible.sync="visible" width="992px" append-to-body>
		<el-form ref="form" :model="formData" :rules="formRules" label-width="86px">
			<el-row :gutter="16">
				<el-col :span="17">
					<el-form-item label="回访主题" prop="title">
						<el-input v-model="formData.title" placeholder="输入回访主题" />
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="回访日期" prop="visitDate">
						<el-date-picker v-model="formData.visitDate" v-bind="dateConfig" placeholder="选择回访日期"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="回访内容" prop="content">
						<editor v-model="formData.content" :height="210" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="脱密记录" prop="outIds">
						<ciphertext-record v-model="formData.outIds" :list="ciphertextList"></ciphertext-record>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template slot="footer">
			<el-button type="primary" @click="handleSubmitData()">确定</el-button>
			<el-button @click="visible = false">取消</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { deepClone } from '@/utils';
import formMixins from '../common/formMixins';
import ciphertextRecord from './ciphertextRecord';
import { getOut } from '@/api/personnal/ciphertext';
import { getVisit, addVisit, updateVisit } from '@/api/personnal/callback';
export default {
	mixins: [formMixins],
	dicts: ['sp_level'],
	components: { ciphertextRecord },
	data() {
		return {
			formName: '脱密回访',
			formRules: {
				title: { required: true, message: '请输入回访主题', trigger: 'change' },
				outIds: { required: true, message: '请添加脱密记录', trigger: 'change' },
				visitDate: { required: true, message: '请选择涉密等级', trigger: 'change' }
			},
			dateConfig: {
				type: 'date',
				editable: false,
				style: { width: '100%' },
				valueFormat: 'yyyy-MM-dd',
				placeholder: '选择回访日期'
			},
			ciphertextList: []
		};
	},
	computed: {
		detailFunction() {
			return eval(getVisit);
		},
		callFunction() {
			return eval(this.addOrEdit ? addVisit : updateVisit);
		}
	},
	watch: {
		formData: {
			handler(data) {
				if (!data.outIds) {
					data['outIds'] = [];
				} else if (!Array.isArray(data.outIds)) {
					let outIdArr = data.outIds.split(',');
					data['outIds'] = outIdArr.map((item) => {
						return { outId: Number(item) };
					});
				}
				this.formatListData(data.outIds);
			},
			immediate: true
		}
	},
	methods: {
		//获取脱密数据
		async getOutData(id) {
			let result = await getOut(id);
			if (result.code === 200) {
				return Promise.resolve(result.data);
			}
		},

		//格式化列表数据
		async formatListData(arr) {
			let promiseArr = arr.map((n) => this.getOutData(n.outId));
			this.ciphertextList = (await Promise.all(promiseArr)).map((item) => {
				return { ...item, title: `${item.userName}的脱密记录${item.createTime}` };
			});
			console.log(this.ciphertextList);
		},

		//格式化请求参数
		formatRequestParams() {
			let params = deepClone(this.formData);
			let outIds = params.outIds.map((n) => n.outId).join();
			params['outIds'] = outIds;
			return params;
		}
	}
};
</script>
<style>
.el-month-table td.current:not(.disabled) .cell {
	line-height: 34px;
	box-sizing: border-box;
	border: solid 1px #1890ff;
}
</style>
